<!DOCTYPE html>
<html>
<head>

    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/oksub.css">
    <meta charset="utf-8">
    <title></title>
</head>
<style>
    .list-con {
        padding: 0 10px 15px 10px;
        margin-bottom: 20px;
    }

    .list-con .layui-table td,
    .layui-table-view,
    .layui-table[lay-skin=line],
    .layui-table[lay-skin=row] {
        border: none;
    }

    .list-con .layui-table tbody {
        color: #777777;
    }

    .list-con .layui-table tbody tr:hover,
    .layui-table[lay-even] tr:nth-child(even) {
        background-color: rgb(255, 255, 255);
        color: #000000;
    }

    .layui-table tr {
        border-bottom: 1px #e2e2e2 solid;
    }

    body .layui-layer-molv .layui-layer-title {
        background: #1E9FFF;
        color: #fff;
        border: none;
    }

    body .layui-layer-molv .layui-layer-maxmin:hover {
        color: #ffffff;
    }

    body .layui-layer-molv .layui-layer-btn a {
        background: #1E9FFF;
        color: #fff;
        border: none;
    }

    body .layui-layer-molv .layui-layer-btn .layui-layer-btn1 {
        background: #8bc2ef;
        color: #fff;
        border: none;
    }

    .required {
        /* color: red;  */
        color: #ffb800;
        font-size: 32px;
        float: left;
        margin-left: 5px;
        margin-top: 5px;
        position: absolute;
        right: -15px;
    }

    .addtea-con .layui-form-select dl dd.layui-this {
        background-color: #1E9FFF !important;
    }

    .addtea-con .layui-btn {
        background-color: #1E9FFF !important;
    }

    .addtea-con .layui-form-select dl {
        max-height: 230px !important;
    }
</style>
<body>
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>操作日志</legend>
</fieldset>
<div class="layui-row">
    <form class="layui-form" style="margin-top:15px;margin-bottom: 25px" action="">
        <div class="layui-inline">
            <label class="layui-form-label">接口URI</label>
            <div class="layui-input-block">
                <input id="uri" type="text" placeholder="接口URI" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">接口名</label>
            <div class="layui-input-block">
                <input id="uriName" type="text" placeholder="接口名" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">操作者</label>
            <div class="layui-input-block">
                <input id="policeId" type="text" placeholder="操作者" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">起始时间</label>
            <div class="layui-input-block">
                <input type="text" placeholder="起始时间" id="startTime" name="startTime" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">终止时间</label>
            <div class="layui-input-block">
                <input type="text" placeholder="终止时间" id="endTime" name="endTime"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div id="selectForm" class="layui-btn layui-btn-normal">
            <i class="layui-icon layui-icon-search" style="font-size: 14px">搜索</i>
        </div>
        <div id="selectEmpty" class="layui-btn layui-btn-normal">
            刷新
        </div>
    </form>
</div>

<!--数据表格-->
<div class="list-con">
    <table class="layui-hide" id="tableId" lay-filter="test"></table>
</div>
</body>

<script src="../../lib/layui/layui.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/application.js"></script>

<script>
    layui.use(['table', 'layer', 'laydate'], function () {
        var table = layui.table;
        var layer= layui.layer
        let laydate = layui.laydate;
        //日期
        laydate.render({
            elem: '#startTime',
            trigger: 'click'
        });

        laydate.render({
            elem: '#endTime',
            trigger: 'click'
        });
        //部门数据绑定
        let operationList = table.render({
            elem: '#tableId',
            url: mainUri + "/operation/select",
            page: true,
            title: '操作日志',
            cols: [[
                {field: 'operationId', title: '操作id', hide:true},
                {field: 'operationUri', title: '操作的uri地址', width: 300},
                {field: 'operationUriName', title: '操作地址名称', width: 300},
                {field: 'operationParameters', title: '参数'},
                {field: 'policeId', title: '操作者id', width: 200,templet: function (d) {
                    return d.user.policeId;
                }},
                {field: 'policeId', title: '操作者姓名', width: 150,templet: function (d) {
                        return d.user.fullName;}},
                {field: 'policeId', title: '操作者部门id',hide:true, width: 200,templet: function (d) {
                        if(d.user&&d.user.department&&d.user.department.departmentId){
                            return d.user.department.departmentId;
                        }else{
                            return "";
                        }

                    }},
                {field: 'policeId', title: '操作者部门名', width: 150,templet: function (d) {
                        if(d.user&&d.user.department&&d.user.department.departmentName){
                            return d.user.department.departmentName;
                        }else{
                            return "";
                        }
                    }},
                {field: 'policeId', title: '操作者角色id',hide:true, width: 200,templet: function (d) {
                        return d.user.role.roleId;
                    }},
                {field: 'policeId', title: '操作者角色名', width: 150,templet: function (d) {
                        return d.user.role.roleName;
                }},
                ]],
            page: {
                layout: ['prev', 'page', 'next', 'skip', 'count'],
                groups: 3,
                limit: 15,
                theme: '#1E9FFF',
            },
            skin: 'row', //行边框风格:line （行边框风格） row （列边框风格） nob （无边框风格）
            even: true, //开启隔行背景:true/false
            size: 'sm',//设定表格尺寸:sm （小尺寸） lg （大尺寸）
            done: function (res, curr, count) {
            }

        });

        //刷新
        $("#selectEmpty").on('click', function () {
            //搜索框置空
            $("#uri").val("");
            $("#uriName").val("");
            $("#policeId").val("");
            $("#startTime").val("");
            $("#endTime").val("");
            operationList.reload({
                page: {
                    curr: 1 //回到第一页
                },
                where: {
                    operationUri: "", operationUriName: "", policeId: "",startTime:"",endTime:""
                }
            })

        })

        ///搜索
        $("#selectForm").on('click', selectForm);

        function selectForm() {
            //获取到输入的值
            let uri=$("#uri").val();
            let uriName=$("#uriName").val();
            let policeId= $("#policeId").val();
            let startTime=$("#startTime").val();
            let endTime=$("#endTime").val();
            operationList.reload({
                url: mainUri + "/operation/select",
                where: {
                    operationUri: uri, operationUriName: uriName, policeId: policeId,startTime:startTime,endTime:endTime
                },
                page: {
                    curr: 1
                }
            });
        }
    });
</script>
</html>
